$(function() {
       
	var exits = ['fadeOut', 'fadeOutDown', 'fadeOutUpBig', 'bounceOut', 'bounceOutDown', 'hinge',
				'bounceOutUp', 'bounceOutLeft', 'rotateOut', 'rotateOutUpLeft', 'lightSpeedOut', 'rollOut'];

	var entrances = ['fadeIn', 'fadeInDown', 'fadeInRight', 'bounceIn', 'bounceInRight', 'rotateIn',
					 'rotateInDownLeft', 'lightSpeedIn', 'rollIn', 'bounceInDown' ]; 
	
	var photos = $('#photos'),
		ignoreClicks = false;
		
		
		//第一个参数 任意类型触发事件时，需要通过event.data传递给事件处理函数的任意数据
        // 第二个参数 可选/Function类型指定的事件处理函数。
	$('.arrow').click(function(e, simulated){
		if(ignoreClicks){
			// 如果单击箭头应该被忽略,阻止事件触发				
			e.stopImmediatePropagation();
			
			return false;
		}
		
		// 否则点击继续,
		ignoreClicks = true;
		
		if(!simulated){
			// 一旦用户点击箭头,停止自动幻灯片
			clearInterval(slideshow);
		}
	});

	//监听单击左箭头
	$('.arrow.next').click(function(e){
		 // 阻止默认事件
		e.preventDefault();
		
		// 
		var elem = $('#photos li:last');
		
		// 最后面的图片加类名
		elem.addClass('animated')
		// 随机抽取一个css 动画库 的动画效果 的class名 添加上
	//		.addClass( exits[Math.floor(exits.length*Math.random())] );
          .addClass("fadeOut");
		
		//延时器
		setTimeout(function(){
			
			// 重置的类                                 prependTo() 方法在被选元素的开头（仍位于内部）插入指定内容
			elem.attr('class','').prependTo(photos);
				 
			ignoreClicks = false;
			
		},1000);
	});

	// 监听点击右的箭头
	$('.arrow.previous').click(function(e){
		// 阻止默认事件
		e.preventDefault();
		
		// 第一个的元素
		var elem = $('#photos li:first');
//		appendTo() 方法在被选元素的结尾（仍然在内部）插入指定内容。
		elem.appendTo(photos)
			.addClass('animated')
			// 随机抽取一个css 动画库 的动画效果 的class名 添加上
			//.addClass( entrances[Math.floor(entrances.length*Math.random())] );
	     .addClass("fadeIn")
		     
		     
		setTimeout(function(){
			
			// 删除类
			elem.attr('class','');
			
			
			ignoreClicks = false;
			
		},1000);
	});


	//开始自动幻灯片
	var slideshow = setInterval(function(){
		
		// 模拟点击每1.5秒
		$('.arrow.next').trigger('click',[true]);
		
	}, 1500);
	
});




/* 


    为了触发animate.css给我们的动画效果，我们需要给动画元素添加相应的CLASS。我们在一张图片展示完毕，必须将它移动到堆叠图片栈的底部，以便能显示下一张图片。下面是我们需要做的事情：
   首先，我们要监听两个导航按钮的click事件。
1.如果“下一张图片”按钮被点击，我们将随机选择一种animate.css效果的class，将它添加到堆叠图片栈顶部的图片上。（实际上是给l列表项的最后一个元素添加）
2.当图片展示动画结束后，我们将把当前动画li元素用jQuery的prependTo方法移动到其它所有li元素的前面。并移除它的animate.css效果的class。
3.对于“前一张图片”按钮，我们做相同的事情。唯一不同的是，在触发动画前，我们将最后一张图片放到图片栈的顶部。 

* */